<template>
  <div class="SexPercent">
    <div class="sex-wrap">
      <div class="sex-item man">
        <span>男士</span>
        <img class="sex-img" src="@/assets/imgs/screen/man.png" alt="" />
      </div>
      <div class="sex-item woman">
        <span>女士</span>
        <img class="sex-img" src="@/assets/imgs/screen/woman.png" alt="" />
      </div>
    </div>
    <div class="chart-wrap" ref="wuChartRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
let wuChart = null
let data = {
  man: 0.6,
  woman: 0.4
}
const options: echarts.EChartOption = {
  grid: {
    left: 0,
    right: 0
  },
  xAxis: {
    type: 'value',
    show: false
  },
  yAxis: [
    {
      show: false,
      type: 'category',
      // name: '男士',
      position: 'left',
      // nameTextStyle: '#fff',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    {
      show: false,
      type: 'category',
      name: '女士',
      position: 'right'
    }
  ],
  series: [
    {
      type: 'bar',
      name: '男士',
      data: [data.man],
      z: 3,
      itemStyle: {
        color: '#007afe',
        borderRadius: [0, 10, 10, 0]
      },
      label: {
        show: true,
        color: '#fff',
        position: 'insideLeft',
        offset: [0, -20],
        formatter: (params: any) => {
          const { seriesName, value } = params
          return seriesName + value * 100 + '%'
        }
      }
    },
    {
      type: 'bar',
      name: '女士',
      barGap: '-100%',
      data: [1],
      itemStyle: {
        color: '#ff4b7a',
        borderRadius: [0, 10, 10, 0]
      },
      label: {
        show: true,
        position: 'insideRight',
        color: '#fff',
        offset: [0, -20],
        formatter: (params) => {
          const { seriesName, value } = params
          return seriesName + data.woman * 100 + '%'
        }
      }
    }
  ]
}
const wuChartRef = ref()
onMounted(() => {
  wuChart = echarts.init(wuChartRef.value)
  wuChart.setOption(options)
})
</script>

<style lang="scss" scoped>
.SexPercent {
  box-sizing: border-box;
  padding: 40px 65px;
}

.chart-wrap {
  width: 100%;
  height: 100px;
}

.sex-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.sex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  width: 110px;
  height: 115px;

  &.man {
    background: url('@/assets/imgs/screen/man-bg.png');
    background-size: cover;
  }

  &.woman {
    background: url('@/assets/imgs/screen/woman-bg.png');
  }

  .sex-img {
    width: 60px;
    height: 60px;
    margin-top: 20px;
  }
}
</style>
